<template>
    <div class="score-tabs-box">
        <van-search v-model="key_word" left-icon="" right-icon="search" shape="round" placeholder="搜索宿舍/楼栋/楼层名称" />
        <!-- 选择容器组件 -->
        <ChangeSelect :firstName="floorName" :secondName="layerName" :thirdName="houseName" :firstShow="floorShow"
            :secondShow="layerShow" :thirdShow="houseShow" @handleFirst="handleFloor" @handleSecond="handleLayer"
            @handleThird="handleHouse"></ChangeSelect>
        <!-- 选择楼栋 -->
        <van-action-sheet v-model:show="floorShow" teleport="#app" :actions="floorActions" @select="selectFloor"
            cancel-text="取消" description="请选择楼栋" close-on-click-action />
        <!-- 选择楼层 -->
        <van-action-sheet v-model:show="layerShow" teleport="#app" :actions="layerActions" @select="selectLayer"
            cancel-text="取消" description="请选择楼层" close-on-click-action />
        <!-- 选择楼层 -->
        <van-action-sheet v-model:show="houseShow" teleport="#app" :actions="houseActions" @select="selectHouse"
            cancel-text="取消" description="请选择房号" close-on-click-action />
        <!-- 主体内容 -->
        <!-- 楼层管理 -->
        <div class="floor-manager-box">
            <Title title="楼层管理"></Title>
            <div class="floor-content-box">
                <van-collapse v-model="activeName" accordion>
                    <van-collapse-item :title="'至礼楼-' + index + 1 + 'F'" :name="index + 1" v-for="(item, index) in 8"
                        :key="index">
                        <template #value>
                            <div>
                                06
                            </div>
                        </template>
                        <van-row :gutter="15">
                            <van-col :span="12" v-for="(items, indexs) in 4" :key="indexs">
                                <Card bgColor="#f9f9f9" :top="false" style="margin-bottom:15px;">
                                    <van-row class="row font16" style="margin-bottom:10px;">
                                        <van-col :span="12" class="color3">101寝室</van-col>
                                        <van-col :span="12">
                                            <van-row justify="end">
                                                <span v-if="indexs == 1 || indexs == 2"
                                                    class="icon iconfont icon-ic_women_line"
                                                    style="color:#FF60A5;"></span>
                                                <span v-else class="icon iconfont icon-ic_men_line"
                                                    style="color:#146AF7;"></span>
                                            </van-row>
                                        </van-col>
                                    </van-row>
                                    <van-row class="row font16">
                                        <van-col :span="12">
                                            <div v-if="indexs == 1 || indexs == 2" class="score-domit-box">-2<span>分</span></div>
                                            <div v-else>无扣分</div>
                                        </van-col>
                                        <van-col :span="12">
                                            <van-row justify="end" class="row">
                                                <van-icon name="arrow" />
                                            </van-row>
                                        </van-col>
                                    </van-row>
                                </Card>
                            </van-col>
                        </van-row>
                    </van-collapse-item>
                </van-collapse>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import $util from "../util/util";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { Toast } from 'vant'
import personImg from "../assets/images/person.png";
const key_word = ref('')
const floorName = ref('楼栋')
const layerName = ref('楼层')
const houseName = ref('房号')
const floorShow = ref(false)
const layerShow = ref(false)
const houseShow = ref(false)
const floorActions = ref([{ name: "选项一" }, { name: "选项二" }, { name: "选项三" }])
const layerActions = ref([{ name: "选项三" }, { name: "选项四" }, { name: "选项五" }])
const houseActions = ref([{ name: "选项六" }, { name: "选项七" }, { name: "选项八" }])
const activeName = ref('1');// 点击楼栋选择楼栋
const handleFloor = () => {
    floorShow.value = true
}
const selectFloor = (item: any) => {
    floorShow.value = false
    floorName.value = item.name
}
// 点击楼层选择楼层
const handleLayer = () => {
    if (floorName.value === '楼栋') {
        return Toast('请先选择楼栋')
    }
    layerShow.value = true
}
const selectLayer = (item: any) => {
    layerShow.value = false
    layerName.value = item.name
}
const handleHouse = () => {
    if (layerName.value === '楼层') {
        return Toast('请先选择楼层')
    }
    houseShow.value = true
}
const selectHouse = (item: any) => {
    houseShow.value = false
    houseName.value = item.name
}
onMounted(() => { });
</script>
<style lang="scss" scoped>
.score-tabs-box {
    border-top: 1px solid #f7f7f7;

    .van-search {
        padding: 10px 20px;
    }

    .floor-manager-box {
        margin-top: 15px;
        padding: 0 15px;

        .floor-content-box {
            margin-top: 15px;
            font-size: 16px;

            .score-domit-box {
                font-size: 16px;
                color: #FF5562;
            }

            span {
                font-size: 15px;
                display: inline-block;
                margin-left: 3px;
            }
        }
    }
}

:deep(.van-collapse-item .van-collapse-item__content) {
    padding-bottom: 0px;
}
</style>